<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            height: 100%;
            margin: 0;
            padding: 0;
            overflow: hidden; /* 防止出现滚动条 */
        }

        .ctn {
            width: 100vw;
            height: 100vh;
            position: relative;
        }
        
        .canvas {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
        .canvas-img {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            transform-origin: center;
        }

        @keyframes rotateAndScale {
            from {
                transform: rotate(0deg) scale(1);
            }
            to {
                transform: rotate(360deg) scale(var(--turnARoundScale));
                /* transform: rotate(360deg); */
            }
        }

        @keyframes rotateAndScale1 {
            from {
                transform: rotate(0deg) scale(1.6);
            }
            to {
                /* transform: rotate(360deg) scale(1.6); */
                transform: rotate(360deg) scale(1.6);
            }
        }

        .rotateAndScale {
            /* CSS变换属性 */
            transform: rotate(45deg) scale(1.5);
            /* 设置变换原点为元素的中心 */
            transform-origin: center;
        }
    </style>
</head>
<body>
    <div class="ctn">
        <canvas class="canvas" id="c"></canvas>
    </div>
    <script src="../vender/gui/dat.gui.js"></script>
    <script src="./script.js"></script>
</body>
</html>